<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算器</title>
	
		<style>
			#bg{
				background-color: aliceblue;
				width: 100%;
				height: 1000px;
				position: relative;
			}
			#calcuFram{
				position: absolute;
				top: 150px;
				left: 25%;
				right: 25%;
				height: 400px;
				background-color: aliceblue;
			}
			#calcuTitle{
				height: 30%;
				background-color: aliceblue;
				position: relative
			}
			.ioBar{
				height: 20%;
				background-color: aliceblue;
				position: relative;
			}
			#btns{
				background-color: aliceblue;
				height: 25%;
			}
			.icon{
				background-color: black;
				width: 30px;
				height: 30px;
			}
			.descrip{
				font-size: 35px;
				position: absolute;
				top: 20%;
				background-color: aliceblue;
			}
			.myinput{
				background-color: aliceblue;
				position: absolute;
				right: 10%;
				width: 60%;
				height: 70%;
				top: 15%;
				font-size: 35px;
				border: 2px solid #333;
				border-radius: 10px;
			}
			.mybtn{
				background-color: aquamarine;
				float: left;
				margin-left:30px ;
				margin-top: 15px;
				width: 15%;
				height: 60%;
				font-size: 40px;
				border: 2px solid #333;
				border-radius: 10px;
				text-align: center;
				line-height: 40px;
				box-shadow: 1px 1px 5px 0px rgba(50, 50, 50, 0.75);
				transition: .15s;
			}
			.mybtn:active{
				transform: scale(0.80);
			}
		</style>
	</head>
	<body>
		<div id="bg">
			<div id="calcuFram">
				<div id="calcuTitle">
					<img src="img/shopcar.png" width="120px" height="120px"></img>
					<span style="font-size: 35px;position: relative;bottom: 30%;left: 10%;">购物简易计算器</span>
				</div>
				<div class="ioBar">
					<span class="descrip">第一个数</span>
					<input id="firstnum" class="myinput" value="" type="text">
				</div>
				<div class="ioBar">
					<span class="descrip">第二个数</span>
					<input id="secondnum" class="myinput" value="" type="text">
				</div>
				<div id="btns">
					<button class="mybtn" onclick="cal('+')">+</button>
					<button class="mybtn" onclick="cal('-')">-</button>
					<button class="mybtn" onclick="cal('*')">*</button>
					<button class="mybtn" onclick="cal('/')">/</button>
				</div>
				<div  class="ioBar">
					<span  class="descrip">计算结果</span>
					<input id="output" class="myinput" type="text" readonly="readonly">
				</div>
			</div>
		</div>
		
		<script>
			function cal(type){
				var firstnum=document.getElementById("firstnum").value;
				var secondnum=document.getElementById("secondnum").value;
				if(isnum(firstnum)&&isnum(secondnum)){
					show(eval(parseFloat(firstnum)+type+parseFloat(secondnum)));
				}
			}
			function isnum(value){
				if(!isNaN(parseFloat(value)) && isFinite(value)){
					return true;
				}else{
					myalert();
					return false;
				}
			}
			function myalert(){
				alert("请输入数字");
			}
			function show(value){
				var output=document.getElementById("output");
				output.value=value;
			}
			
			// function add(){
			// 	var firstnum=document.getElementById("firstnum").value;
			// 	var secondnum=document.getElementById("secondnum").value;
			// 	if(isnum(firstnum)&&isnum(secondnum)){
			// 		show(parseFloat(firstnum)+parseFloat(secondnum));
			// 	}
			// }
			// function sub(){
			// 	var firstnum=document.getElementById("firstnum").value;
			// 	var secondnum=document.getElementById("secondnum").value;
			// 	if(isnum(firstnum)&&isnum(secondnum)){
			// 		show(parseFloat(firstnum)-parseFloat(secondnum));
			// 	}
			// }
			// function mult(){
			// 	var firstnum=document.getElementById("firstnum").value;
			// 	var secondnum=document.getElementById("secondnum").value;
			// 	if(isnum(firstnum)&&isnum(secondnum)){
			// 		show(parseFloat(firstnum)*parseFloat(secondnum));
			// 	}
			// }
			// function divs(){
			// 	var firstnum=document.getElementById("firstnum").value;
			// 	var secondnum=document.getElementById("secondnum").value;
			// 	if(isnum(firstnum)&&isnum(secondnum)){
			// 		show(parseFloat(firstnum)/parseFloat(secondnum));
			// 	}
			// }
			
		</script>
	</body>
</html>